// font-color
// $color-text-primary: #333;
// $color-text-secondary: #666;
// $color-text-tertiary: $color-wihite;
// $color-text-quaternary: $color-black;
$text-color: (
  primary: $color-text-primary,
  secondary: $color-text-secondary,
  tertiary: $color-text-tertiary,
  quaternary: $color-text-quaternary,
);

@each $color, $value in $text-color {
  [text-#{$color}] {
    color: $value;
  }
}

// bg-color
// $background-color-primary: #f1f1f1;
// $background-color-secondary: $color-wihite;
// $background-text-tertiary: $color-primary;
$background-color: (
  primary: $background-color-primary,
  secondary: $background-color-secondary,
  tertiary: $background-color-tertiary,
  drak: $color-text-quaternary,
);

@each $color, $value in $background-color {
  [bg-#{$color}] {
    background-color: $value;
  }
}

@each $i in 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9 {
  [bga-#{$i * 10}] {
    background-color: rgba(0, 0, 0, $i);
  }
}
